<template>
  <div>
    <ul>
      <li class="item " v-for="(item,i) in items" :key="i">
        <div class="number">{{item.cid}}</div>
        <div class="book">
          <img src="/zhd-img/lieyan.jpg" alt="" />
        </div>
        <div class="content">
          <span class="title">{{item.name}}</span>
          <div class="author">{{item.author}}</div>
          <div class="info">
            {{item.info}}
          </div>
          <span class="category">{{item.extra}}</span>
          <span class="line"></span>
          <span class="text-number">70万字</span>
        </div>
        <div></div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items:[
                {cid:1,name:'烈焰',author:'尼卡',extra:'言情',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:2,name:'龙婆',author:'蚕丝如故',extra:'悬疑',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:3,name:'一纸千金',author:'伊北',extra:'女性',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:4,name:'小山城',author:'包包鱼',extra:'女性',info:'罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。'},
                {cid:5,name:'云胡不喜',author:'尼卡',extra:'言情',info:'罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。'},
                {cid:6,name:'三胎我又又又生了个儿子',author:'边塞',extra:'女性',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:7,name:'试着做个兽系青年吧',author:'玫瑰',extra:'女性',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:8,name:'朝朝',author:'孟德的小公主',extra:'言情'},
                {cid:9,name:'你钓过鲨鱼吗',author:'陆云云',extra:'言情',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                {cid:10,name:'春痕不欲',author:'芭蕉',extra:'言情',info:`罗焰火这一生都在鉴别真与假、美与丑、新与旧、善与恶。他相信来到他眼前的一切，都有贵贱之分。 蒲晨来则恰恰相反。一个聪明果决的拍卖师，遇上一个智慧善良的外科医生；一个追求完美、睡一晚恨不得换三张床的男人，遇上一个垃圾桶边扒窝都能睡下去的女人……什么，都恰恰相反。可爱情的发生，大概也正由于，他们，恰恰相反。`},
                
            ]
    }
  },
}
</script>
<style scoped>
    .item{
        width: 750px;
        height: 160px;
        margin: 0 auto;
        display: flex;
        justify-content: left;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .item:hover{
        background-color: #eff2f3;
    }
    .number{
        width: 27px;
        height: 30px;
        margin: 45px 50px auto 20px;
        
    }
    .book {
        width: 80px;
        height: 120px;
        padding: 0;
        margin-right: 10px;
    }
    .book img{
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 5px;
        opacity: 1;
        transition: opacity .5s ease-in;
    }
    .content{
        width: 500px;
        height: 120px;
    }
    .title{
        font-size: 16px;
        line-height: 1.25;
        font-weight: bold;
        color: black;
    }
    .author{
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        color: #777;
        margin-bottom: 12px;
    }
    .info{
        width: 500px;
        height: 40px;
        font-size: 13px;
        word-break: break-word;
        line-height: 1.5;
        overflow-x: hidden;
        overflow-y: hidden;
        margin-bottom: 8px;
    }
    .category{
        font-size: 12px;
        color: #777;
    }
    .line{
        width: 1px;
        height: 10px;
        background: #777;
        display: inline-block;
        margin: 0 10px;
    }
    .text-number{
        font-size: 12px;
        color: #777;
    }
</style>